<template>
<div class="main">
    <p>南航碧桂园小区</p>
    <div class="num">
        <div class="num-item">
            <div class="bgs">
                <img src="https://cdn7.axureshop.com/demo2024/2033334/images/工作台/u4307.svg" alt="">
            </div>
            <div class="households">
                <p>总户数</p>
                <span>15100</span>
            </div>
        </div>
        <div class="num-item">
            <div class="bgs-two">
                <img src="https://cdn7.axureshop.com/demo2024/2033334/images/工作台/u4314.svg" alt="">
            </div>
            <div class="households">
                <p>房屋总数量</p>
                <span>1050</span>
            </div>
        </div>
        <div class="num-item">
            <div class="bgs-three">
                <img src="https://cdn7.axureshop.com/demo2024/2033334/images/工作台/u4321.svg" alt="">
            </div>
            <div class="households">
                <p>车位总数量</p>
                <span>1136</span>
            </div>
        </div>
        <div class="num-item">
            <div class="bgs-four">
                <img src="https://cdn7.axureshop.com/demo2024/2033334/images/工作台/u4328.svg" alt="">
            </div>
            <div class="households">
                <p>设备总数量</p>
                <span>910</span>
            </div>
        </div>
    </div>
    <div class="charts">
        <div class="chart">
            <div class="title">
                <p>近一周报修量趋势</p>
            </div>
            <div class="echarts" ref="myChart"></div>
        </div>
        <div class="rights">
            <div class="convenient">
                <div class="texts">
                    <p>便捷导航</p>
                    <span>新建住户</span>
                    <span>车位管理</span>
                    <span>新建月卡</span>
                    <span>新建报修</span>
                    <span>访客记录</span>
                    <span>账单管理</span>
                    <span>+ 添加</span>
                </div>
            </div>
            <div class="bottom">
                <div class="texts">
                    <p>备忘录</p>
                    <div class="textareas">
                        <textarea name="" id="" cols="30" rows="10" placeholder="请输入"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <p class="query">住户查询</p>
        <div class="search-box">
            <div class="search">
                <span>精确查询</span>
                <el-select v-model="value" placeholder="住户姓名">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <div class="search-btn">
                    <el-input v-model="input" placeholder="请输入内容"></el-input>
                </div>
            </div>
            <div class="searchs">
                <el-button type="primary">查询</el-button>
                <el-button>重置</el-button>
            </div>
        </div>
        <div class="table">
            <el-table
                :data="lists"
                style="width: 100%">
                <el-table-column
                    :prop="value"
                    :label="key"
                    v-for="(key,value) in table_heard" :key="key" height="50">
                </el-table-column>
                <div class="big"></div>
                <el-table-column
                    prop="type"
                    label="操作"
                    width="220">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">审核</el-button>
                        <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page">
            <div class="block">
                <el-pagination
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :page-sizes="[10]"
                :total="page"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                background>
                </el-pagination>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import axios from 'axios'
export default {
        data() {
            return {
                lists:[],
                page:1,
                currentPage1: 5,
                currentPage2: 5,
                currentPage3: 5,
                currentPage4: 1,
                table_heard: { "id": '序号', "name": "姓名", "type": "类型", "state": "状态", "idnumber": "证件号码", "phone": "手机号码", "room": "房间" },
                input: '',
                textarea: '',
                options: [{
                value: '选项1',
                label: '住户姓名'
                }, {
                value: '选项2',
                label: '手机号码'
                }, {
                value: '选项3',
                label: '证件号码'
                }],
                value: '',
                
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage4=val
            },
            getData(){
                axios.get("http://localhost:8085/user").then(res=>{
                    console.log(res);
                    this.page=res.data.length
                    this.lists=res.data.splice(0,10)
                }).catch(error=>{
                    console.log(error);
                })
            }
        },
        
        mounted(){
        var chartDom = this.$refs.myChart;
        var myChart = this.$echarts.init(chartDom);
        var option;
        this.getData();
        option = {
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['04-01', '04-02', '04-03', '04-04', '04-05', '04-06', '04-07']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                data: [125, 485, 455, 295, 425, 425, 275],
                type: 'line',
                areaStyle: {
                    color: 'rgba(234, 241, 254, 1)'
                }
                }
            ]
        };
        option && myChart.setOption(option);
        },
        watch:{
            currentPage4:{
                handler(val) {
                    axios.get("http://localhost:8085/user").then(res=>{
                        console.log(res);
                        this.lists=res.data.splice((val-1)*10,10)
                    }).catch(error=>{
                        console.log(error);
                    })
                },
            }
        },
    }

</script>

<style scoped lang="scss">
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
// .el-table__empty-text{
//     ::v-deep .el-table__row{
//         height: 30px !important;
//     }
// }
.boxs{
    .tops{
        padding: 0 24px;
        width: 100%;
        height: 48px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        background-color: rgba(0, 21, 41, 1);
        .left{
            display: flex;
            align-items: center;
            .cover{
                width: 32px;
                height: 32px;
                border-radius: 50%;
                overflow: hidden;
                position: relative;
                .covers{
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
                .picture{
                    width: 14px;
                    height: 13px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                }
            }
            span{
                margin-left: 8px;
                font-weight: 500;
                font-size: 18px;
                letter-spacing: 1px;
                color: #FFFFFF;
            }
        }
        .right{
            display: flex;
            align-items: center;
            margin-right: 30px;
            img{
                width: 24px;
                height: 24px;
            }
            span{
                margin-left: 8px;
                font-weight: 500;
                font-size: 14px;
                letter-spacing: 1px;
                color: #FFFFFF;
            }
        }
    }
    .el-col.el-col-12{
        width: 216px !important;
        // height: 0px !important;
        background-color: #fff !important;
        // margin-top: 40px !important;
        .el-submenu__title{
            height: 52px !important;
            .ax_default.box_1.selected{
                height: 46px !important;
            }
        }
    }
}
// .bottoms {
//     ::v-deep .el-col.el-col-12{
//         height: 0 !important;
//     }
// }
// .boxs .el-col.el-col-12[data-v-78027b66]{
//     height: 0 !important;
// }
.icon{
    margin-left: 4px;
    width: 15px;
    margin-right: 8px;
}
.bottoms{
    display: flex;
    background-color: rgba(240, 242, 245, 1);
    margin-top: 48px;
    .main{
        margin: 0px;
        background-color: rgba(240, 242, 245, 1);
        background-image: none;
        position: relative;
        left: -24px;
        width: 1136px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
        p{
            font-size: 20px;
            color: rgba(0, 0, 0, 0.847058823529412);
            font-weight: 600;
            margin: 20px 0;
        }
        .num{
            display: flex;
            justify-content: space-between;
            .num-item{
                width: 266px;
                height: 110px;
                background-color: #fff;
                display: flex;
                align-items: center;
                .bgs{
                    width: 56px;
                    height: 56px;
                    background: inherit;
                    background-color: rgba(24, 144, 255, 1);
                    border-radius: 50%;
                    position: relative ;
                    margin-left: 15px;
                    img{
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%,-50%);
                        width: 21px;
                        height: 21px;
                    }
                }
                .bgs-two{
                    background-color: rgba(114, 98, 253, 1) !important;
                    border-radius: 50%;
                    position: relative !important;
                    margin-left: 15px;
                    width: 56px;
                    height: 56px;
                    background: inherit;
                    img{
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%,-50%);
                        width: 21px;
                        height: 21px;
                    }
                }
                .bgs-three{
                    background-color: rgba(255, 170, 0, 1) !important;
                    border-radius: 50%;
                    position: relative;
                    margin-left: 15px;
                    width: 56px;
                    height: 56px;
                    background: inherit;
                    img{
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%,-50%);
                        width: 21px;
                        height: 21px;
                    }
                }
                .bgs-four{
                    background-color: rgba(82, 196, 26, 1) !important;
                    border-radius: 50%;
                    position: relative;
                    margin-left: 15px;
                    width: 56px;
                    height: 56px;
                    background: inherit;
                    img{
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%,-50%);
                        width: 21px;
                        height: 21px;
                    }
                }
                
                .households{
                    margin-left: 15px;
                    p{
                        font-weight: 400;
                        color: rgba(0, 0, 0, 0.427450980392157);
                        line-height: 22px;
                        font-size: 14px;
                        margin-top: 0;
                        margin-bottom: 10px;
                    }
                    span{
                        font-weight: 600;
                        color: rgba(0, 0, 0, 1);
                        line-height: 22px;
                        font-size: 30px;
                    }
                }
            }
        }
    }
}
.charts{
    display: flex;
    justify-content: space-between;
    .chart{
        position: relative;
        margin-top: 20px;
        width: 772px;
        height: 397px;
        background-color: rgba(255, 255, 255, 1);
        border-width: 1px;
        border-style: solid;
        border-color: rgba(233, 233, 233, 1);
        .title{
            position: absolute;
            top: -2px;
            left: 47px;
            p{
                font-size: 16px;
                color: rgba(0, 0, 0, 0.847058823529412);
                font-weight: 600;
                
            }
        }
        .echarts{
            width: 772px;
            height: 397px;
        }
    }
    .rights{
        margin-top: 20px;
        .convenient{
            width: 344px;
            height: 179px;
            background-color: rgba(255, 255, 255, 1);
            .texts{
                p{
                    width: 122px;
                    height: 68px;
                    padding: 24px 0 0 24px;
                    font-size: 16px;
                    color: rgba(0, 0, 0, 0.847058823529412);
                    font-weight: 500;
                    margin: 0;
                }
                span{
                    margin: 0  0 24px 24px;
                    font-size: 14px;
                    display: inline-block;
                    
                }
            }
        }
        .bottom{
            padding: 24px;
            width: 344px;
            height: 179px;
            margin-top: 37px;
            background-color: rgba(255, 255, 255, 1);
            .texts{
                p{
                    width: 122px;
                    height: 44px;
                    font-size: 16px;
                    color: rgba(0, 0, 0, 0.847058823529412);
                    font-weight: 500;
                    margin: 0;
                }
                textarea{
                    outline: none;
                    resize: none;
                    height: 80px;
                    width: 299px;
                    border: 1px solid rgba(233, 233, 233, 1);
                    color: rgba(0, 0, 0, 0.149019607843137);
                    padding: 14px 0 0 20px;
                    font-size: 12px;
                }
            }
        }
    }
}
.footer{
    // height: 845px;
    background-color: rgba(255, 255, 255, 1);
    padding: 24px;
    margin-top: 20px;
    .query{
        width: 122px;
        height: 44px;
        margin: 0 !important;
        font-size: 16px !important;
        color: rgba(0, 0, 0, 0.847058823529412) !important;
        font-weight: normal !important;
    }
    .search-box{
        display: flex;
        justify-content: space-between;
        .search{
            display: flex;
            width: 503px;
            align-items: center;
            span{
                display: inline-block;
                width: 60px;
                font-size: 14px;
                color: rgba(0, 0, 0, 0.847058823529412);
                margin-right: 15px;
            }
        }
    }
    
}
.search-btn{
    margin-left: 15px !important;
}
.block{
    margin-top: 40px;
}
.el-select.el-select--mini{
    display: flex;
    justify-content: flex-end !important;
}
</style>